<template>
  <div class="main-content">
    <div class="main-container"
         v-if="ruleDisplayFlag">
      <p class="base-title">
        <span class="dot"></span>配置经纪人注册规则
      </p>
      <li class="otherLiTwo">
        <div class="list-info-templateTwo">
          <div class="topInfo">
            <label class="control-label">经纪人注册是否需要审核</label>
            <button class="btn btn-theme registerBtn"
                    id="auditIndexBtn"
                    hidden
                    @click="saveChange(5)">保存</button>
          </div>
          <div class="control-details">
            <RadioGroup v-model="auditIndexShow"
                        @on-change="radioChange('auditIndexBtn')">
              <Radio label="1"
                     class="radio">需要</Radio>
              <Radio label="0">不需要</Radio>
            </RadioGroup>
          </div>
        </div>
      </li>
      <li class="otherLiTwo">
        <div class="list-info-templateTwo">
          <div class="topInfo">
            <label class="control-label">经纪人注册补充字段</label>
            <button class="btn btn-theme lastBtn"
                    id="supplementBtn"
                    hidden
                    @click="saveChange(6)">保存</button>
          </div>
          <div class="control-details">
            <div class="chooseItem"
                 v-for="(item,i) in supplementList">
              <Checkbox v-model="item.checked"
                        class="checkbox"
                        @on-change="radioChange('supplementBtn')">{{item.name}}
              </Checkbox>
              <span class="spanText"
                    v-if="item.name==='身份证号码' || item.name==='经纪人服务卡'">{{item.displayType | filterType(typeList)}}</span>
              <Select v-else
                      v-model="item.displayType"
                      class="select"
                      size="small"
                      @on-change="radioChange('supplementBtn')">
                <Option v-for="ele in typeList"
                        :value="ele.id"
                        :key="ele.id">{{ ele.name }}</Option>
              </Select>
              <Select v-model="item.requiredStatus"
                      class="select"
                      size="small"
                      @on-change="radioChange('supplementBtn')">
                <Option v-for="ele in requiredList"
                        :value="ele.id"
                        :key="ele.id">{{ ele.name }}</Option>
              </Select>
              <Icon type="ios-trash"
                    class="delete"
                    v-if="item.name!=='身份证号码' && item.name!=='经纪人服务卡'"
                    @click="deleteAudit(i)" />

            </div>
            <div class="chooseItem addItem">
              <Input v-model="addAudit.name"
                     placeholder="名称"
                     size="small"
                     class="input"
                     :maxlength="10" />
              <Select v-model="addAudit.displayType"
                      class="select"
                      size="small">
                <Option v-for="ele in typeList"
                        :value="ele.id"
                        :key="ele.id">{{ ele.name }}</Option>
              </Select>
              <Select v-model="addAudit.requiredStatus"
                      class="select"
                      size="small">
                <Option v-for="ele in requiredList"
                        :value="ele.id"
                        :key="ele.id">{{ ele.name }}</Option>
              </Select>
              <Icon type="ios-add-circle-outline"
                    class="delete"
                    @click="addAuditContent" />
            </div>
          </div>
        </div>
      </li>
    </div>
    <div v-else
         class="companyName">
      公司名称：{{this.companyName}}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      auditIndexShow: "0",
      supplementList: [
        {
          name: "身份证号码",
          displayType: "1",
          requiredStatus: "1",
          checked: true
        },
        {
          name: "经纪人服务卡",
          displayType: "0",
          requiredStatus: "1",
          checked: true
        }
      ],
      initSupplementList: [],
      typeList: [
        { id: "0", name: "文本" },
        { id: "1", name: "图片" }
      ],
      requiredList: [
        { id: "1", name: "必填" },
        { id: "0", name: "选填" }
      ],
      addAudit: {
        name: "",
        displayType: null,
        requiredStatus: null
      },
      ruleDisplayFlag: true,
      companyName: ""
    };
  },
  filters: {
    filterType(value, typeList) {
      if (!value) return "";
      let data = typeList.find((item) => {
        return item.id == value;
      });
      if (data) {
        return data.name;
      } else {
        return "文本";
      }
    }
  },
  created() {
    this.initDecision();
  },
  methods: {
    deleteAudit(index) {
      this.supplementList.splice(index, 1);
      $("#supplementBtn").show();
    },
    addAuditContent() {
      for (let value in this.addAudit) {
        if (!this.addAudit[value]) {
          layer.msg("请先补充完整信息");
          return;
        }
      }
      this.supplementList.push({ ...this.addAudit, checked: false });
      this.addAudit = {
        name: "",
        displayType: null,
        requiredStatus: null
      };
      $("#supplementBtn").show();
    },
    initDecision() {
      var url = this.utilHelper.apiUrl + "/api/getAgentRule";
      this.$http.post(url, { params: {} }).then((response) => {
        if (response.body.result == "1") {
          const data = response.body.resData;
          this.ruleDisplayFlag = data.ruleDisplayFlag;
          this.companyName = data.companyName;
          this.auditIndexShow = data.partnerCheckFlag ? "1" : "0";
          this.supplementList =
            data.modelList.map((item) => {
              return {
                ...item,
                checked: item.displayStatus === "1" ? true : false
              };
            }) || [];
          this.initSupplementList =
            data.modelList.map((item) => {
              return {
                ...item,
                checked: item.displayStatus === "1" ? true : false
              };
            }) || [];
        }
      });
    },
    radioChange(type) {
      $("#" + type).show();
    },
    saveChange(type) {
      var _self = this;
      switch (type) {
        // 经纪人注册是否需要审核
        case 5:
          _self.turnRegisterAudit();
          break;
        // 经纪人注册补充字段
        case 6:
          _self.turnSupplement();
          break;
        default:
          break;
      }
    },
    // 保存经纪人规则
    turnRegisterAudit() {
      const msg = this.auditIndexShow == "1" ? "需要" : "不需要";
      const init = this.auditIndexShow === "1" ? "0" : "1";
      var _self = this;
      layer.confirm(
        "经纪人注册" + msg + "审核?",
        {
          btn: ["确定", "取消"],
          cancel() {
            _self.auditIndexShow = init;
            $("#auditIndexBtn").hide();
          }
        },
        function (index) {
          var url = _self.utilHelper.apiUrl + "/api/savePartnerCheckRule";
          _self.$http
            .post(url, { params: { enablePartnerCheck: _self.auditIndexShow } })
            .then(
              (response) => {
                layer.close(index);
                if (response.body.result === "1") {
                  layer.msg("修改成功");
                  $("#auditIndexBtn").hide();
                } else {
                  layer.msg("修改失败");
                }
              },
              (response) => {}
            );
        },
        function () {
          _self.auditIndexShow = init;
          $("#auditIndexBtn").hide();
        }
      );
    },
    // 保存补充字段
    turnSupplement() {
      var _self = this;
      layer.confirm(
        "保存经纪人注册补充字段?",
        {
          btn: ["确定", "取消"],
          cancel() {
            _self.supplementList = _self.initSupplementList;
            $("#supplementBtn").hide();
          }
        },
        function (index) {
          var url = _self.utilHelper.apiUrl + "/api/saveModel";
          const data = _self.supplementList.map((item) => {
            return {
              name: item.name,
              displayType: item.displayType,
              displayStatus: item.checked ? "1" : "0",
              requiredStatus: item.requiredStatus
            };
          });
          _self.$http.post(url, { params: { modelReqDtoList: data } }).then(
            (response) => {
              if (response.body.result === "1") {
                layer.msg("修改成功");
                $("#supplementBtn").hide();
              } else {
                layer.msg("修改失败");
                $("#supplementBtn").hide();
              }
            },
            (response) => {}
          );
        },
        function () {
          _self.supplementList = _self.initSupplementList;
          $("#supplementBtn").hide();
        }
      );
    }
  }
};
</script>
<style lang="less">
.main-content .control-details {
  .ivu-select-arrow {
    top: 80%;
  }
}
</style>
<style scoped lang="less">
.companyName {
  font-size: 15px;
  color: #000;
  margin-left: 60px;
}
.base-title {
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  text-align: left;
  color: #000;
  margin-top: 20px;
  height: 33px;
  line-height: 33px;
}
.base-title .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f87142;
  margin: 0 30px;
}
.base-title .tips {
  font-size: 13px;
  color: #999999;
  font-weight: normal;
  padding-left: 10px;
}
.list-info-templateTwo {
  .control-label {
    font-weight: normal !important;
    font-size: 15px;
    min-width: 10px;
    text-align: left;
    color: #000;
  }
}
.lastBtn {
  margin-left: 150px;
}
.registerBtn {
  margin-left: 120px;
}
.control-details {
  .radio {
    margin-right: 100px;
  }
  .addItem {
    margin: 10px 0;
  }
  .input {
    margin-right: 5px;
    width: 130px;
  }
  .checkbox {
    width: 130px;
  }
  .select {
    width: 70px;
    margin-right: 3px;
  }
  .delete {
    font-size: 22px;
  }
  .spanText {
    width: 68px;
    display: inline-block;
  }
}
.otherLiTwo {
  padding-top: 20px;
  padding-left: 60px;
}
</style>
